{% extends 'base.html' %}

{% block title %}正则表达式测试器{% endblock %}

{% block content %}
<div class="container mx-auto px-4 py-8">
    <div class="mb-8">
        <h1 class="text-3xl font-bold text-gray-800 mb-2">正则表达式测试器</h1>
        <p class="text-gray-600">测试和验证正则表达式，实时查看匹配结果</p>
    </div>

    <div class="flex flex-col lg:flex-row gap-8">
        <!-- 侧边栏工具列表 -->
        <div class="w-full lg:w-1/4">
            <div class="bg-white rounded-lg shadow-md p-6">
                <h2 class="text-xl font-bold mb-6 text-gray-800">开发工具</h2>
                <ul class="space-y-3">
                    <li>
                        <a href="{{ url_for('dev_tools.json_formatter') }}" class="flex items-center text-gray-600 hover:text-purple-600">
                            <div class="w-8 text-center">
                                <i class="fas fa-code-branch"></i>
                            </div>
                            <span>JSON格式化</span>
                        </a>
                    </li>
                    <li>
                        <a href="{{ url_for('dev_tools.code_formatter') }}" class="flex items-center text-gray-600 hover:text-purple-600">
                            <div class="w-8 text-center">
                                <i class="fas fa-code"></i>
                            </div>
                            <span>代码格式化</span>
                        </a>
                    </li>
                    <li>
                        <a href="{{ url_for('dev_tools.regex_tester') }}" class="flex items-center text-purple-600 font-medium">
                            <div class="w-8 text-center">
                                <i class="fas fa-search"></i>
                            </div>
                            <span>正则表达式测试</span>
                        </a>
                    </li>
                    <li>
                        <a href="{{ url_for('dev_tools.timestamp_converter') }}" class="flex items-center text-gray-600 hover:text-purple-600">
                            <div class="w-8 text-center">
                                <i class="fas fa-clock"></i>
                            </div>
                            <span>时间戳转换</span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>

        <!-- 主要内容区域 -->
        <div class="w-full lg:w-3/4">
            <div class="bg-white rounded-lg shadow-md p-6">
                <!-- 正则表达式输入区 -->
                <div class="mb-6">
                    <div class="flex items-center justify-between mb-2">
                        <label for="regex-pattern" class="block text-gray-700 font-medium">正则表达式</label>
                        <div class="flex space-x-1">
                            <button id="help-btn" class="text-blue-600 text-sm hover:underline">
                                <i class="fas fa-question-circle mr-1"></i>帮助
                            </button>
                        </div>
                    </div>
                    <div class="flex">
                        <span class="inline-flex items-center px-3 text-gray-500 bg-gray-100 border border-r-0 border-gray-300 rounded-l-md">
                            /
                        </span>
                        <input 
                            type="text" 
                            id="regex-pattern" 
                            class="flex-1 block w-full rounded-none border border-gray-300 focus:ring-blue-500 focus:border-blue-500 py-2 px-4"
                            placeholder="输入正则表达式，如: \b\w+\b"
                        >
                        <span class="inline-flex items-center px-3 text-gray-500 bg-gray-100 border border-l-0 border-gray-300 rounded-r-md">
                            /
                        </span>
                    </div>
                </div>

                <!-- 正则标志选项 -->
                <div class="mb-6">
                    <label class="block text-gray-700 font-medium mb-2">标志选项</label>
                    <div class="flex flex-wrap gap-3">
                        <label class="flex items-center">
                            <input type="checkbox" id="flag-ignore-case" class="rounded text-blue-600 focus:ring-blue-500">
                            <span class="ml-2 text-gray-700">忽略大小写 (i)</span>
                        </label>
                        <label class="flex items-center">
                            <input type="checkbox" id="flag-multiline" class="rounded text-blue-600 focus:ring-blue-500">
                            <span class="ml-2 text-gray-700">多行匹配 (m)</span>
                        </label>
                        <label class="flex items-center">
                            <input type="checkbox" id="flag-dot-all" class="rounded text-blue-600 focus:ring-blue-500">
                            <span class="ml-2 text-gray-700">点匹配所有字符 (s)</span>
                        </label>
                    </div>
                </div>

                <!-- 测试文本输入 -->
                <div class="mb-6">
                    <label for="test-string" class="block text-gray-700 font-medium mb-2">测试文本</label>
                    <textarea 
                        id="test-string" 
                        rows="6" 
                        class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"
                        placeholder="输入要匹配的文本内容..."
                    ></textarea>
                    <div class="mt-2 text-sm text-gray-500">
                        字符数: <span id="char-count">0</span>
                    </div>
                </div>

                <!-- 测试按钮 -->
                <div class="mb-6">
                    <button id="test-btn" class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
                        <i class="fas fa-play mr-2"></i>测试匹配
                    </button>
                    <button id="clear-btn" class="ml-2 px-4 py-2 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2">
                        <i class="fas fa-eraser mr-2"></i>清空
                    </button>
                </div>

                <!-- 加载指示器 -->
                <div id="loading-indicator" class="hidden">
                    <div class="flex justify-center items-center mb-4">
                        <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
                    </div>
                    <p class="text-center text-gray-600 text-sm">正在处理中...</p>
                </div>

                <!-- 结果区域 -->
                <div id="result-container" class="hidden mb-6">
                    <div class="border-t border-gray-200 pt-6">
                        <h3 class="text-lg font-bold text-gray-800 mb-3">匹配结果</h3>
                        <div class="mb-4">
                            <div class="bg-gray-50 rounded-md p-4 flex justify-between items-center border border-gray-300">
                                <div>
                                    <span class="font-medium text-gray-700">匹配状态:</span> 
                                    <span id="match-status" class="ml-2"></span>
                                </div>
                                <div>
                                    <span class="font-medium text-gray-700">匹配数量:</span> 
                                    <span id="match-count" class="ml-2">0</span>
                                </div>
                            </div>
                        </div>
                        <!-- 建议提示区域 -->
                        <div id="suggestion-container" class="hidden mb-4">
                            <div class="bg-blue-50 border border-blue-200 rounded-md p-4 text-blue-700">
                                <div class="flex items-center mb-2">
                                    <i class="fas fa-lightbulb mr-2"></i>
                                    <span class="font-medium">改进建议</span>
                                </div>
                                <div id="suggestion-message" class="text-sm mb-2"></div>
                                <div class="bg-white p-2 border border-blue-200 rounded mb-2 font-mono text-sm">
                                    <code id="suggestion-pattern"></code>
                                </div>
                                <button id="use-suggestion" class="mt-1 px-3 py-1 bg-blue-600 text-white text-sm rounded hover:bg-blue-700">
                                    <i class="fas fa-check mr-1"></i>使用建议的正则表达式
                                </button>
                            </div>
                        </div>
                        <!-- 错误提示区域 -->
                        <div id="error-container" class="hidden mb-4">
                            <div class="bg-red-50 border border-red-200 rounded-md p-4 text-red-700">
                                <div class="flex items-center mb-2">
                                    <i class="fas fa-exclamation-circle mr-2"></i>
                                    <span class="font-medium">错误信息</span>
                                </div>
                                <div id="error-message" class="text-sm"></div>
                                <div class="mt-3 text-sm">
                                    <p>常见正则表达式错误:</p>
                                    <ul class="list-disc pl-5 mt-1">
                                        <li>未闭合的括号或者字符类</li>
                                        <li>无效的转义序列</li>
                                        <li>错误的量词使用</li>
                                        <li>在Python中，特殊字符如\w需要使用\\w表示</li>
                                        <li>字符类中的连字符(-)用于表示字符范围，如[a-z]。如果要匹配连字符本身，应将其放在字符类的开头或结尾，如[-abc]或[abc-]</li>
                                        <li>常见邮箱正则表达式应使用[\\w\\.-]而不是[\\w-\\.]，避免错误的字符范围</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div id="matches-container" class="max-h-80 overflow-y-auto border border-gray-300 rounded-md bg-white p-4">
                            <div id="no-matches" class="text-gray-500 text-center py-4">没有找到匹配项</div>
                            <div id="matches-list" class="hidden space-y-4"></div>
                        </div>
                    </div>
                </div>

                <!-- 使用说明 -->
                <div class="border-t border-gray-200 pt-6">
                    <h3 class="font-bold text-gray-800 mb-3">常用正则表达式</h3>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
                        <div class="bg-gray-50 p-3 rounded border border-gray-200">
                            <p class="text-sm font-medium text-gray-700 mb-1">邮箱地址</p>
                            <code class="text-xs bg-gray-200 p-1 rounded">^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$</code>
                        </div>
                        <div class="bg-gray-50 p-3 rounded border border-gray-200">
                            <p class="text-sm font-medium text-gray-700 mb-1">URL地址</p>
                            <code class="text-xs bg-gray-200 p-1 rounded">https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)</code>
                        </div>
                        <div class="bg-gray-50 p-3 rounded border border-gray-200">
                            <p class="text-sm font-medium text-gray-700 mb-1">手机号码(中国)</p>
                            <code class="text-xs bg-gray-200 p-1 rounded">^1[3-9]\d{9}$</code>
                        </div>
                        <div class="bg-gray-50 p-3 rounded border border-gray-200">
                            <p class="text-sm font-medium text-gray-700 mb-1">日期 (YYYY-MM-DD)</p>
                            <code class="text-xs bg-gray-200 p-1 rounded">^\d{4}-(0[1-9]|1[0-2])-(0[1-9]|[12][0-9]|3[01])$</code>
                        </div>
                    </div>

                    <h3 class="font-bold text-gray-800 mb-3">基本语法</h3>
                    <div class="text-gray-600 space-y-2 text-sm">
                        <p><code class="bg-gray-100 px-1 rounded">.</code> - 匹配任意单个字符（除了换行符）</p>
                        <p><code class="bg-gray-100 px-1 rounded">^</code> - 匹配字符串的开始</p>
                        <p><code class="bg-gray-100 px-1 rounded">$</code> - 匹配字符串的结束</p>
                        <p><code class="bg-gray-100 px-1 rounded">\d</code> - 匹配数字字符，等同于 [0-9]</p>
                        <p><code class="bg-gray-100 px-1 rounded">\w</code> - 匹配单词字符，等同于 [A-Za-z0-9_]</p>
                        <p><code class="bg-gray-100 px-1 rounded">\s</code> - 匹配空白字符（空格、制表符、换行符等）</p>
                        <p><code class="bg-gray-100 px-1 rounded">[...]</code> - 匹配方括号内的任意一个字符</p>
                        <p><code class="bg-gray-100 px-1 rounded">(x|y)</code> - 匹配 x 或 y</p>
                        <p><code class="bg-gray-100 px-1 rounded">x*</code> - 匹配 x 零次或多次</p>
                        <p><code class="bg-gray-100 px-1 rounded">x+</code> - 匹配 x 一次或多次</p>
                        <p><code class="bg-gray-100 px-1 rounded">x?</code> - 匹配 x 零次或一次</p>
                        <p><code class="bg-gray-100 px-1 rounded">x{n}</code> - 精确匹配 x n 次</p>
                        <p><code class="bg-gray-100 px-1 rounded">x{n,}</code> - 匹配 x 至少 n 次</p>
                        <p><code class="bg-gray-100 px-1 rounded">x{n,m}</code> - 匹配 x 至少 n 次，最多 m 次</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 帮助模态框 -->
<div id="help-modal" class="fixed inset-0 z-50 hidden">
    <div class="absolute inset-0 bg-black bg-opacity-50"></div>
    <div class="relative mx-auto mt-20 max-w-2xl bg-white rounded-lg shadow-xl p-6">
        <button id="close-modal" class="absolute top-4 right-4 text-gray-400 hover:text-gray-500">
            <i class="fas fa-times text-xl"></i>
        </button>
        <h3 class="text-xl font-bold text-gray-800 mb-4">正则表达式帮助</h3>
        <div class="space-y-4">
            <div>
                <h4 class="font-medium text-gray-700 mb-2">基本语法</h4>
                <table class="min-w-full border border-gray-300">
                    <thead>
                        <tr class="bg-gray-100">
                            <th class="py-2 px-4 border-b text-left">符号</th>
                            <th class="py-2 px-4 border-b text-left">说明</th>
                            <th class="py-2 px-4 border-b text-left">示例</th>
                        </tr>
                    </thead>
                    <tbody class="text-sm">
                        <tr>
                            <td class="py-2 px-4 border-b font-mono">\d</td>
                            <td class="py-2 px-4 border-b">匹配数字</td>
                            <td class="py-2 px-4 border-b">\d+ 匹配一个或多个数字</td>
                        </tr>
                        <tr>
                            <td class="py-2 px-4 border-b font-mono">\w</td>
                            <td class="py-2 px-4 border-b">匹配字母、数字、下划线</td>
                            <td class="py-2 px-4 border-b">\w{3} 匹配三个单词字符</td>
                        </tr>
                        <tr>
                            <td class="py-2 px-4 border-b font-mono">\s</td>
                            <td class="py-2 px-4 border-b">匹配空白字符</td>
                            <td class="py-2 px-4 border-b">\s+ 匹配一个或多个空白字符</td>
                        </tr>
                        <tr>
                            <td class="py-2 px-4 border-b font-mono">^</td>
                            <td class="py-2 px-4 border-b">匹配字符串开始</td>
                            <td class="py-2 px-4 border-b">^A 匹配以A开头的字符串</td>
                        </tr>
                        <tr>
                            <td class="py-2 px-4 border-b font-mono">$</td>
                            <td class="py-2 px-4 border-b">匹配字符串结束</td>
                            <td class="py-2 px-4 border-b">Z$ 匹配以Z结尾的字符串</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div>
                <h4 class="font-medium text-gray-700 mb-2">量词</h4>
                <table class="min-w-full border border-gray-300">
                    <thead>
                        <tr class="bg-gray-100">
                            <th class="py-2 px-4 border-b text-left">符号</th>
                            <th class="py-2 px-4 border-b text-left">说明</th>
                        </tr>
                    </thead>
                    <tbody class="text-sm">
                        <tr>
                            <td class="py-2 px-4 border-b font-mono">*</td>
                            <td class="py-2 px-4 border-b">匹配前面的表达式零次或多次</td>
                        </tr>
                        <tr>
                            <td class="py-2 px-4 border-b font-mono">+</td>
                            <td class="py-2 px-4 border-b">匹配前面的表达式一次或多次</td>
                        </tr>
                        <tr>
                            <td class="py-2 px-4 border-b font-mono">?</td>
                            <td class="py-2 px-4 border-b">匹配前面的表达式零次或一次</td>
                        </tr>
                        <tr>
                            <td class="py-2 px-4 border-b font-mono">{n}</td>
                            <td class="py-2 px-4 border-b">匹配前面的表达式恰好n次</td>
                        </tr>
                        <tr>
                            <td class="py-2 px-4 border-b font-mono">{n,}</td>
                            <td class="py-2 px-4 border-b">匹配前面的表达式至少n次</td>
                        </tr>
                        <tr>
                            <td class="py-2 px-4 border-b font-mono">{n,m}</td>
                            <td class="py-2 px-4 border-b">匹配前面的表达式至少n次，最多m次</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // 获取DOM元素
        const regexPattern = document.getElementById('regex-pattern');
        const testString = document.getElementById('test-string');
        const charCount = document.getElementById('char-count');
        const flagIgnoreCase = document.getElementById('flag-ignore-case');
        const flagMultiline = document.getElementById('flag-multiline');
        const flagDotAll = document.getElementById('flag-dot-all');
        const testBtn = document.getElementById('test-btn');
        const clearBtn = document.getElementById('clear-btn');
        const helpBtn = document.getElementById('help-btn');
        const closeModalBtn = document.getElementById('close-modal');
        const helpModal = document.getElementById('help-modal');
        const resultContainer = document.getElementById('result-container');
        const matchStatus = document.getElementById('match-status');
        const matchCount = document.getElementById('match-count');
        const noMatches = document.getElementById('no-matches');
        const matchesList = document.getElementById('matches-list');
        const loadingIndicator = document.getElementById('loading-indicator');
        const errorContainer = document.getElementById('error-container');
        const errorMessage = document.getElementById('error-message');
        const suggestionContainer = document.getElementById('suggestion-container');
        const suggestionMessage = document.getElementById('suggestion-message');
        const suggestionPattern = document.getElementById('suggestion-pattern');
        const useSuggestion = document.getElementById('use-suggestion');

        // 更新字符计数
        function updateCharCount() {
            charCount.textContent = testString.value.length;
        }

        // 监听输入框变化，更新字符计数
        testString.addEventListener('input', updateCharCount);
        updateCharCount();

        // 清空按钮
        clearBtn.addEventListener('click', function() {
            regexPattern.value = '';
            testString.value = '';
            updateCharCount();
            resultContainer.classList.add('hidden');
            errorContainer.classList.add('hidden');
        });

        // 帮助按钮和模态框
        helpBtn.addEventListener('click', function() {
            helpModal.classList.remove('hidden');
        });

        closeModalBtn.addEventListener('click', function() {
            helpModal.classList.add('hidden');
        });

        // 点击模态框背景关闭
        helpModal.addEventListener('click', function(e) {
            if (e.target === helpModal || e.target.classList.contains('bg-opacity-50')) {
                helpModal.classList.add('hidden');
            }
        });

        // 测试按钮
        testBtn.addEventListener('click', function() {
            const pattern = regexPattern.value.trim();
            const string = testString.value;
            
            if (!pattern) {
                showMessage('请输入正则表达式', 'error');
                return;
            }
            
            // 获取标志
            const flags = {
                ignoreCase: flagIgnoreCase.checked,
                multiline: flagMultiline.checked,
                dotAll: flagDotAll.checked
            };
            
            // 显示加载指示器
            loadingIndicator.classList.remove('hidden');
            resultContainer.classList.add('hidden');
            
            // 准备发送的数据
            const formData = new FormData();
            formData.append('pattern', pattern);
            formData.append('string', string);
            formData.append('ignoreCase', String(flagIgnoreCase.checked));
            formData.append('multiline', String(flagMultiline.checked));
            formData.append('dotAll', String(flagDotAll.checked));
            
            // 发送AJAX请求
            fetch('{{ url_for("dev_tools.regex_tester") }}', {
                method: 'POST',
                headers: {
                    'X-Requested-With': 'XMLHttpRequest'
                },
                body: formData
            })
            .then(response => {
                if (!response.ok) {
                    return response.json().then(errData => {
                        throw new Error(errData.message || '网络请求失败');
                    });
                }
                return response.json();
            })
            .then(data => {
                // 隐藏加载指示器
                loadingIndicator.classList.add('hidden');
                
                if (data.error === 0) {
                    // 更新结果
                    resultContainer.classList.remove('hidden');
                    errorContainer.classList.add('hidden'); // 隐藏错误容器
                    
                    // 处理建议信息
                    if (data.suggestion) {
                        suggestionContainer.classList.remove('hidden');
                        suggestionMessage.textContent = data.suggestion.message;
                        suggestionPattern.textContent = data.suggestion.pattern;
                    } else {
                        suggestionContainer.classList.add('hidden');
                    }
                    
                    // 更新匹配状态
                    const isValid = data.valid;
                    if (isValid) {
                        matchStatus.innerHTML = '<span class="text-green-600 font-medium">有效</span>';
                        matchCount.textContent = data.match_count || 0;
                        
                        // 显示匹配项
                        if (data.match_count > 0) {
                            noMatches.classList.add('hidden');
                            matchesList.classList.remove('hidden');
                            
                            // 清空之前的匹配项
                            matchesList.innerHTML = '';
                            
                            // 添加新的匹配项
                            data.matches.forEach((match, index) => {
                                const matchItem = document.createElement('div');
                                matchItem.className = 'bg-gray-50 p-4 rounded border border-gray-200';
                                
                                // 构建匹配项HTML
                                let matchHtml = `
                                    <div class="flex justify-between mb-2">
                                        <span class="font-medium text-gray-700">匹配 #${index + 1}</span>
                                        <span class="text-sm text-gray-500">位置: ${match.start} - ${match.end}</span>
                                    </div>
                                    <div class="bg-white p-2 border border-gray-200 rounded mb-2 font-mono text-sm">
                                        ${escapeHtml(match.group)}
                                    </div>
                                `;
                                
                                // 如果有捕获组
                                if (match.groups && match.groups.length > 0) {
                                    matchHtml += `<div class="mt-2">
                                        <div class="text-sm font-medium text-gray-700 mb-1">捕获组:</div>
                                        <div class="grid grid-cols-2 gap-2">`;
                                    
                                    match.groups.forEach((group, groupIndex) => {
                                        matchHtml += `
                                            <div class="bg-gray-100 p-1 rounded text-xs font-mono overflow-hidden text-ellipsis">
                                                <span class="text-gray-500">组 ${groupIndex + 1}:</span> ${escapeHtml(group || '')}
                                            </div>
                                        `;
                                    });
                                    
                                    matchHtml += `</div></div>`;
                                }
                                
                                matchItem.innerHTML = matchHtml;
                                matchesList.appendChild(matchItem);
                            });
                        } else {
                            noMatches.classList.remove('hidden');
                            matchesList.classList.add('hidden');
                        }
                    } else {
                        matchStatus.innerHTML = '<span class="text-red-600 font-medium">无效</span>';
                        matchCount.textContent = '0';
                        noMatches.classList.remove('hidden');
                        matchesList.classList.add('hidden');
                    }
                    
                    showMessage('测试完成');
                } else {
                    showMessage(data.message || '测试失败', 'error');
                    // 显示结果区域，但标记为无效
                    resultContainer.classList.remove('hidden');
                    // 显示错误容器
                    errorContainer.classList.remove('hidden');
                    errorMessage.textContent = data.message || '正则表达式无效';
                    
                    matchStatus.innerHTML = '<span class="text-red-600 font-medium">无效</span>';
                    matchCount.textContent = '0';
                    noMatches.classList.remove('hidden');
                    noMatches.textContent = '正则表达式无效，无法进行匹配';
                    matchesList.classList.add('hidden');
                }
            })
            .catch(error => {
                // 隐藏加载指示器
                loadingIndicator.classList.add('hidden');
                showMessage('请求出错: ' + error.message, 'error');
                // 显示结果区域，但标记为错误
                resultContainer.classList.remove('hidden');
                // 显示错误容器
                errorContainer.classList.remove('hidden');
                errorMessage.textContent = error.message || '发生未知错误';
                
                matchStatus.innerHTML = '<span class="text-red-600 font-medium">错误</span>';
                matchCount.textContent = '0';
                noMatches.classList.remove('hidden');
                noMatches.textContent = '发生错误，无法进行匹配';
                matchesList.classList.add('hidden');
            });
        });
        
        // 转义HTML
        function escapeHtml(unsafe) {
            return unsafe
                .replace(/&/g, "&amp;")
                .replace(/</g, "&lt;")
                .replace(/>/g, "&gt;")
                .replace(/"/g, "&quot;")
                .replace(/'/g, "&#039;");
        }
        
        // 显示消息提示
        function showMessage(message, type = 'success') {
            const toast = document.createElement('div');
            
            toast.className = 'fixed bottom-4 right-4 px-4 py-2 rounded shadow-lg z-50 transition-opacity duration-500';
            toast.style.opacity = '0';
            
            if (type === 'error') {
                toast.classList.add('bg-red-500', 'text-white');
            } else {
                toast.classList.add('bg-green-500', 'text-white');
            }
            
            toast.textContent = message;
            
            document.body.appendChild(toast);
            
            // 淡入效果
            setTimeout(() => {
                toast.style.opacity = '1';
            }, 10);
            
            // 3秒后淡出并移除
            setTimeout(() => {
                toast.style.opacity = '0';
                setTimeout(() => {
                    document.body.removeChild(toast);
                }, 500);
            }, 3000);
        }

        // 添加使用建议按钮的事件监听器
        useSuggestion.addEventListener('click', function() {
            regexPattern.value = suggestionPattern.textContent;
            testBtn.click(); // 自动重新测试
        });
    });
</script>
{% endblock %} 